<template>
	<view class="content">
		<view  v-if="isLoading == true"><image class="loading" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/loading-1.gif"></image></view>
		<view v-if="isLoading == false">
			<view class="tab">
				<view class="tab-item" :class="{ active: currentTab === 'tab1' }" @click="switchTab('tab1')">我发布的</view>
				<view class="tab-item" :class="{ active: currentTab === 'tab2' }" @click="switchTab('tab2')">我参与的</view>
				<view class="tab-item" :class="{ active: currentTab === 'tab3' }" @click="switchTab('tab3')">已完成的</view>
			</view>
			<view class="content-item" v-show="currentTab === 'tab1'">
				<view class="list">
					<uni-list class="list-all" v-for="one in list">
						<uni-card @click="jump(one.id)" :title="one.district" extra="进入报名">
							<text class="text1">{{ one.title }}</text>
							<br />
							<br />
							<text class="text2">{{ one.createTime }}</text>
							<text class="text3" v-if="one.lea > 0" style="color: limegreen;">剩余名额:{{ one.lea }}</text>
							<text class="text3" v-if="one.lea == 0" style="color: red;">剩余名额:{{ one.lea }}</text>
						</uni-card>
					</uni-list>
				</view>
			</view>
			<view class="content-item" v-show="currentTab === 'tab2'">
				<view class="list">
					<uni-list class="list-all" v-for="one in list">
						<uni-card @click="jump(one.id)" :title="one.district" extra="进入报名">
							<text class="text1">{{ one.title }}</text>
							<br />
							<br />
							<text class="text2">{{ one.createTime }}</text>
							<text class="text3" v-if="one.lea > 0" style="color: limegreen;">剩余名额:{{ one.lea }}</text>
							<text class="text3" v-if="one.lea == 0" style="color: red;">剩余名额:{{ one.lea }}</text>
						</uni-card>
					</uni-list>
				</view>
			</view>
			<view class="content-item" v-show="currentTab === 'tab3'">
				<view class="list">
					<uni-list class="list-all" v-for="one in list">
						<uni-card @click="jump(one.id)" :title="one.district" extra="进入报名">
							<text class="text1">{{ one.title }}</text>
							<br />
							<br />
							<text class="text2">{{ one.createTime }}</text>
							<text class="text3" v-if="one.lea > 0" style="color: limegreen;">剩余名额:{{ one.lea }}</text>
							<text class="text3" v-if="one.lea == 0" style="color: red;">剩余名额:{{ one.lea }}</text>
						</uni-card>
					</uni-list>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
export default {
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {
			currentTab: 'tab1',
			page: 1,
			length: 10,
			list: [],
			msg: '名额剩余',
			isLastPage: false,
			tab: 'tab1',
			checkIn: 0,
			isLoading:true
		};
	},
	onLoad: function() {
		let that = this;
		that.loadMessageList(that);
		setTimeout(function(resp) {
			that.isLoading = false
		}, 400);
	},
	onReachBottom: function() {
		let that = this;
		if (that.isLastPage) {
			return;
		}
		that.page = that.page + 1;
		if (that.tab == 'tab1') {
			that.loadMessageList(that);
		} else if (that.tab == 'tab2') {
			that.loadMyParticipationList(that);
		}else if(that.tab == 'tab3'){
			that.loadFinishedList(that);
		}
	},
	methods: {
		jump: function(id) {
			let that = this;
			if(that.currentTab == 'tab2'){
				that.checkIn = 1
			}else if(that.currentTab == 'tab1'){
				that.checkIn = 0
			}else if(that.currentTab == 'tab3'){
				that.checkIn = 0
			}
			uni.navigateTo({
				url: '/pages/message/message?id=' + id + '&checkIn=' + that.checkIn
			});
		},
		switchTab(tab) {
			let that = this;
			this.currentTab = tab;
			that.tab = tab;
			that.page = 1;
			that.length = 10;
			if (tab == 'tab1') {
				that.list = '';
				that.loadMessageList(that);
			} else if (tab == 'tab2') {
				that.list = '';
				that.loadMyParticipationList(that);
			}else if(tab == 'tab3'){
				that.list = '';
				that.loadFinishedList(that);
			}
		},
		loadMessageList: function(ref) {
			let that = this;
			let data = {
				page: ref.page,
				length: ref.length
			};
			ref.ajax(ref.url.searchMyPublishByPage, 'POST', data, function(resp) {
				let result = resp.data.result;
				if (result == null || result.length == 0) {
					ref.isLastPage = true;
					ref.page = ref.page - 1;
					uni.showToast({
						icon: 'none',
						title: '已经到底了'
					});
				} else {
					if (ref.page == 1) {
						ref.list = [];
					}
					ref.list = ref.list.concat(result);
					// if (ref.page > 1) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '新增了' + result.length + '条数据'
					// 	});
					// }
				}
			});
		},
		loadMyParticipationList: function(ref) {
			let that = this;
			let data = {
				page: ref.page,
				length: ref.length
			};
			ref.ajax(ref.url.searchMyParticipationByPage, 'POST', data, function(resp) {
				let result = resp.data.result;
				if (result == null || result.length == 0) {
					ref.isLastPage = true;
					ref.page = ref.page - 1;
					uni.showToast({
						icon: 'none',
						title: '已经到底了'
					});
				} else {
					if (ref.page == 1) {
						ref.list = [];
					}
					ref.list = ref.list.concat(result);
					// if (ref.page > 1) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '新增了' + result.length + '条数据'
					// 	});
					// }
				}
			});
		},
		loadFinishedList: function(ref) {
			let that = this;
			let data = {
				page: ref.page,
				length: ref.length
			};
			ref.ajax(ref.url.isFinished, 'POST', data, function(resp) {
				let result = resp.data.result;
				if (result == null || result.length == 0) {
					ref.isLastPage = true;
					ref.page = ref.page - 1;
					uni.showToast({
						icon: 'none',
						title: '已经到底了'
					});
				} else {
					if (ref.page == 1) {
						ref.list = [];
					}
					ref.list = ref.list.concat(result);
					// if (ref.page > 1) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '新增了' + result.length + '条数据'
					// 	});
					// }
				}
			});
		}
	}
};
</script>

<style lang="less">
@import url('my_activity.less');
</style>
